<template>
  <div class="beauty-junior">
    <div class="head"></div>
    <div v-show="itemNum" v-click="onSelect" class="buttonset">
      <!-- <a href="javascript:void(0)" data-index="0" :class="{active:showIndex===3}">组周冠军</a> -->
      <a
        v-for="(d,i, key) of staredStudents"
        :key="key"
        href="javascript:void(0)"
        :data-index="i"
        :class="{active:showIndex===i}"
      >{{d.star_name.trim().substr(0,4)}}</a>
    </div>

    <div v-show="itemNum" class="star-conts">
      <!-- <transition-group :name="showType?'zoom-in':'zoom-out'"
                        :enter-active-class="'transition-active'"
      :leave-active-class="'transition-active'">-->
      <!-- <div v-show="showIndex===0" :key="0" class="s-item">
        <div class="tp">
          <p><img :src="groupWeekWinner.win_url"></p>
          <span>{{groupWeekWinner.group_name}}</span>
        </div>
        <dl class="des">
          <dt>成员：</dt>
          <dd v-for="(name, i) of groupWeekWinner.student_names" :key="i">{{name}}</dd>
        </dl>
      </div>-->
      <div v-for="(d,i) of staredStudents" v-show="showIndex===i" :key="i" class="s-item">
        <div class="tp">
          <p>
            <img :src="d.url">
          </p>
          <span>{{d.student_name}}</span>
        </div>
        <div class="des">{{d.describe}}</div>
      </div>
      <!-- </transition-group> -->
    </div>
  </div>
</template>

<script>
import Timer from '@/modules/corejs/time/timer'
export default {
  props: {
    adonises: {
      type: Object,
      default () { return {} }
    }
  },
  data () {
    return {
      showIndex: 0,
      showType: 0
    }
  },
  computed: {
    groupWeekWinner () {
      let groupWeekWinner = this.adonises.group_week_winner || {}
      groupWeekWinner.student_names = (groupWeekWinner.student_names || '').split(',')
      return groupWeekWinner
    },
    staredStudents () {
      // 限制3个
      let staredStudents = this.adonises.stared_students || []
      if (staredStudents.length > 3) {
        staredStudents.length = 3
      }
      return staredStudents
    },
    itemNum () {
      // let first = this.groupWeekWinner.group_name ? 1 : 0
      // return first + this.staredStudents.length
      return this.staredStudents.length
    }
  },
  watch: {
    adonises () {
      this.timerUpdate()
    }
  },
  mounted () {
    this.timerInit()
  },
  methods: {
    onSelect (e) {
      let index = e.target.dataset.index
      if (index) {
        let { showIndex } = this
        if (showIndex > index) {
          this.showType = 0
        } else {
          this.showType = 1
        }
        this.showIndex = index * 1
        this.timerStart()
      }
    },
    timerInit () {
      this.timer = new Timer({
        callBack: this.timeExcu,
        time: 6000
      })
      this.timerStart()
    },
    timerUpdate () {
      this.showIndex = 0
      this.timerStart()
    },
    timerStart () {
      this.timer.stop()
      if (this.itemNum > 1) this.timer.start()
    },
    timeExcu () {
      let { showIndex } = this
      if (++showIndex >= this.itemNum) {
        showIndex = 0
      }
      this.showIndex = showIndex
    }
  }
}
</script>

<style scoped>
.transition-active {
  width: 100%;
  transition: 0.4s ease;
}
.beauty-junior {
  position: relative;
    top: -8px;
}

.head {
  /* width: 300px; */
  height: 50px;
  margin-left: 10px;
  background: url(@/components/temp8/imgs/star.png) no-repeat center center;
  background-size: auto 100%;
}
.s-item {
  padding: 10px 0 0 64px
}
.buttonset {
  /* width: 270px; */
  height: 65px;
  margin-left: 25px;
  margin-bottom: 10px;
  text-align: center;
  position: absolute;
  left: 196px;
  top: 78px;
  width: 328px;
}
.buttonset a {
  width: 94px;
  height: 29px;

  display: inline-block;
  text-align: center;
  border: solid 1px #34c7eb;
  border-left: none;
  font-size: 18px;
  color: #34c7eb;
  line-height: 1.6;

  &.active {
    background-color: #34c7eb;
    color: #fff;
  }
}
.buttonset a:first-child{
  border: solid 1px #34c7eb;
}
.tp {
  text-align: center;
  margin-bottom: 10px;
  padding-top: 18px;
  float: left;
  p {
    padding: 5px;
    box-shadow: 0px 1px 2px 0px rgba(7, 9, 14, 0.09);
  }
  span {
    position: absolute;
    left: 63px;
    top: 290px;
    width: 150px;
    color: #878787;
  }
  img {
    width: 137px;
    height: 192px;
    display: block;
    /* box-shadow: 0 0 12px #7e7e7e; */
  }

}
.des {
  line-height: 35px;
  font-size: 18px;
  width: 270px;
  /* margin-left: 30px; */
  padding-left: 40px;
  color: #666;
  max-height: 140px;
  overflow: hidden;
  position: relative;
  top: 70px;

  dt {
    color: #50ce81;
  }
  dd {
    float: left;
    width: 50%;
  }
  dd:nth-child(2n + 1) {
    padding-left: 36px;
    box-sizing: border-box;
  }
}

</style>
